<template>
  <div class="statistics-container">
    <!-- 左侧指标项菜单 -->
    <aside class="left-menu">
      <el-tabs v-model="activeTab" class="nav-tabs" stretch>
        <el-tab-pane label="指标项" name="stock">
          <div class="nav-content">
            <div class="nav-item" :class="{ active: activeIndicator === 'asset_original' }"
							@click="onSelectIndicator('asset_original')">
							<span class="nav-title">资产原值</span>
						</div>
						<div class="nav-item" :class="{ active: activeIndicator === 'asset_net' }"
							@click="onSelectIndicator('asset_net')">
							<span class="nav-title">资产净值</span>
						</div>
           
<!--            <div class="nav-item" :class="{ active: activeNavItem === 'value' }" @click="onNavItemClick('value')">-->
<!--              <span class="nav-title">价值资产墙</span>-->
<!--            </div>-->
<!--            <div class="nav-item" :class="{ active: activeNavItem === 'physical' }" @click="onNavItemClick('physical')">-->
<!--              <span class="nav-title">实物资产墙</span>-->
<!--            </div>-->
<!--            <div class="nav-item" :class="{ active: activeNavItem === 'pricing' }" @click="onNavItemClick('pricing')">-->
<!--              <span class="nav-title">核价资产墙</span>-->
<!--            </div>-->
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="menu-title"></div>

    </aside>

    <!-- 右侧内容区域 -->
    <main class="right-content">
      <!-- 数据筛选卡片 -->
      <div class="filter-card">
        <div class="card-title">数据筛选</div>
        <div class="filter-content">
          <div class="filter-row">
            <div class="filter-item">
              <label>会计年度</label>
              <div class="year-range">
                <el-select v-model="filterData.startYear" placeholder="请选择" size="small" @change="onStartYearChange">
                  <el-option
                    v-for="year in yearOptions"
                    :key="year"
                    :label="year"
                    :value="year"
                  />
                </el-select>
                <span class="range-separator">至</span>
                <el-select v-model="filterData.endYear" placeholder="请选择" size="small" @change="onEndYearChange">
                  <el-option
                    v-for="year in endYearOptions"
                    :key="year"
                    :label="year"
                    :value="year"
                  />
                </el-select>
              </div>
            </div>
            <div class="filter-item">
              <label>资产分类</label>
              <el-select v-model="filterData.assetType" placeholder="请选择资产分类" size="small">
                <el-option
                  v-for="type in assetTypeOptions"
                  :key="type.value"
                  :label="type.label"
                  :value="type.value"
                />
              </el-select>
            </div>
            <div class="filter-item">
              <label>利润中心</label>
              <el-select v-model="filterData.profitCenter" placeholder="请选择利润中心" size="small">
                <el-option
                  v-for="center in profitCenterOptions"
                  :key="center.value"
                  :label="center.label"
                  :value="center.value"
                />
              </el-select>
            </div>
          </div>
          <div class="filter-actions">
            <el-button size="small" @click="resetFilter">重置</el-button>
            <el-button type="primary" size="small" @click="executeFilter">执行</el-button>
          </div>
        </div>
      </div>

      <!-- 统计结果卡片 -->
      <div class="result-card">
        <div class="card-title">统计结果</div>
        <div class="result-content">
          <div class="result-item">
            <div class="result-icon">
              <svg-icon icon-class="statistics" class="statistics-icon" />
            </div>
            <div class="result-info">
              <div class="result-label">{{ currentIndicator.label }}</div>
              <div class="result-value">{{ statisticsResult.value }} </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 明细数据卡片 -->
      <div class="detail-card">
        <div class="card-title">明细数据</div>
        <div class="detail-content">
          <block-table
            :table-data="detailData"
            :loading="tableLoading"
            table-key="statistics-detail"
          />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import BlockTable from './components/blockTable.vue'
import {assetValue} from '@/api/dataCenter'

export default {
  name: 'Statistics',
  components: {
    BlockTable
  },
  data() {
    return {
      activeTab:'stock',
      activeIndicator: 'asset_original',
      indicatorList: [
        { key: 'asset_original', label: '资产原值' },
        { key: 'asset_net', label: '资产净值', disabled: true }
      ],
      filterData: {
        startYear: new Date().getFullYear(),
        endYear: new Date().getFullYear(),
        assetType: 'all',
        profitCenter: 'all'
      },
      yearOptions: Array.from({length: 23}, (_, i) => 2003 + i),
      assetTypeOptions: [
        { value: 'all', label: '全部' },
        { value: 'transformer_equipment', label: '变电设备' },
        { value: 'transmission_line', label: '输电线路' },
        { value: 'distribution_line_equipment', label: '配电线路及设备' }
      ],
      profitCenterOptions: [
        { value: 'all', label: '全部' },
        { value: 'fuzhou', label: '国网福州供电公司' },
        { value: 'xiamen', label: '国网厦门供电公司' },
        { value: 'putian', label: '国网莆田供电公司' },
        { value: 'quanzhou', label: '国网泉州供电公司' },
        { value: 'zhangzhou', label: '国网漳州供电公司' },
        { value: 'longyan', label: '国网龙岩供电公司' },
        { value: 'sanming', label: '国网三明供电公司' },
        { value: 'nanping', label: '国网南平供电公司' },
        { value: 'ningde', label: '国网宁德供电公司' }
      ],
      statisticsResult: {
        value: 0
      },
      detailData: [],
      tableLoading: false
    }
  },
  computed: {
    currentIndicator() {
      return this.indicatorList.find(item => item.key === this.activeIndicator) || {}
    },
    endYearOptions() {
      // 结束年份选项：显示大于等于开始年份的年份（包括同一年度）
      return this.yearOptions.filter(year => year >= this.filterData.startYear)
    }
  },
  methods: {
    onSelectIndicator(index) {
      if(index == 'asset_net'){
        return
      }
      this.activeIndicator = index
      // 切换指标时重新加载数据
      this.loadStatisticsData()
    },
    onStartYearChange(value) {
      // 当开始年份改变时，如果结束年份小于开始年份，则重置结束年份
      if (this.filterData.endYear && this.filterData.endYear < value) {
        this.filterData.endYear = ''
      }
    },
    onEndYearChange(value) {
      // 当结束年份改变时，验证是否小于开始年份
      if (value < this.filterData.startYear) {
        this.$message.warning('结束年份不能小于开始年份')
        this.filterData.endYear = ''
      }
    },
    resetFilter() {
      const currentYear = new Date().getFullYear()
      this.filterData = {
        startYear: currentYear,
        endYear: currentYear,
        assetType: 'all',
        profitCenter: 'all'
      }
      this.loadStatisticsData()
    },
    executeFilter() {
      // 验证年份选择
      if (!this.filterData.startYear || !this.filterData.endYear) {
        this.$message.warning('请选择完整的会计年度范围')
        return
      }

      if (this.filterData.endYear < this.filterData.startYear) {
        this.$message.warning('结束年份不能小于开始年份')
        return
      }

      this.loadStatisticsData()
    },
    async loadStatisticsData() {
      this.tableLoading = true
      try {
        // 构建请求参数
        const params = {
          fiscalYearStart: this.filterData.startYear,
          fiscalYearEnd: this.filterData.endYear,
          assetCategoryName: this.filterData.assetType == 'all' ? '' : this.assetTypeOptions.find(item => item.value === this.filterData.assetType).label,
          profitCenterName: this.filterData.profitCenter == 'all' ? '' : this.profitCenterOptions.find(item => item.value === this.filterData.profitCenter).label,
          // indicator: this.activeIndicator
        }

        // 调用assetValue接口
        const response = await assetValue(params)

        if (response.code == 200) {
          // 更新统计结果
          this.statisticsResult.value = response.extraValue// 转换为万元

          // 更新明细数据
          this.detailData = response.rows.map((item, index) => ({
            serial: index + 1,
            year: item.fiscalYear,
            profitCenter: item.profitCenterName,
            assetType: item.assetCategoryName,
            value: item.originalValue / 10000 // 转换为万元
          }))
        } else {
          this.$message.error(response.msg || '获取数据失败')
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
        this.$message.error('获取数据失败，请稍后重试')
      } finally {
        this.tableLoading = false
      }
    },
    formatValue(value) {
      return new Intl.NumberFormat('zh-CN').format(value)
    }
  },
  mounted() {
    this.loadStatisticsData()
  }
}
</script>

<style lang="scss" scoped>
.statistics-container {
  display: flex;
  height: calc(100vh - 50px);
  background: #f5f5f5;
	min-width: 1620px;
	min-height: 960px;
}

.left-menu {
  width: 200px;
  background: #fff;
  border-right: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
  padding: 0;

  .menu-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 0px 16px 16px;
  }

  .indicator-menu {
    border: none;
    flex: 1;

    .el-menu-item {
      height: 50px;
      line-height: 50px;
      margin: 4px 8px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 8px;

      &.active {
        background: #e4f4ee;
        color: #1f7150;
        font-weight: 600;
      }

      &:hover {
        background: #f0f9f6;
      }

      &.disabled {
        color: #c0c4cc !important;
        cursor: not-allowed;
        background: #f5f7fa !important;

        &:hover {
          background: #f5f7fa !important;
        }

        .indicator-label {
          color: #c0c4cc !important;
        }
      }

      .indicator-icon {
        font-size: 16px;
      }

      .indicator-label {
        font-size: 14px;
      }
    }
  }
}

.right-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filter-card,
.result-card,
.detail-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 16px 20px;
  border-bottom: 1px solid #e6e6e6;
  background: #fafafa;
}

.filter-content {
  padding: 20px;
	min-height: 180px;

  .filter-row {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;

    label {
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }

    .year-range {
      display: flex;
      align-items: center;
      gap: 8px;

      .range-separator {
        color: #999;
        font-size: 14px;
      }
    }
  }

  .filter-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
}

.result-content {
  padding: 20px;
	min-height: 100px;

  .result-item {
    display: flex;
    align-items: center;
    gap: 16px;

    .result-icon {
      font-size: 32px;
      color: #1f7150;

      .statistics-icon {
        width: 32px;
        height: 32px;
        color: #1f7150;
      }
    }

    .result-info {
      .result-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 4px;
      }

      .result-value {
        font-size: 24px;
        font-weight: bold;
        color: #1f7150;
      }
    }
  }
}

.detail-content {
  padding: 20px;
  height: 600px;
}

// 响应式设计
@media (max-width: 1200px) {
  .filter-content .filter-row {
    gap: 16px;
  }

  .filter-content .filter-item {
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .left-menu {
    width: 160px;
  }

  .right-content {
    padding: 16px;
    gap: 16px;
  }

  .filter-content .filter-row {
    flex-direction: column;
    gap: 16px;
  }

  .filter-content .filter-item {
    min-width: auto;
  }
}

.nav-item {
	padding: 15px 20px;
	cursor: pointer;
	border-left: 3px solid transparent;
	margin-bottom: 5px;
	transition: all 0.3s;
}

.nav-item:hover {
	background-color: #f5f7fa;
}

.nav-item.active {
	background-color: #e8f5e8;
	border-left-color: #67c23a;
}
</style>
